<template>
  <div class="app-container">
      <div class="ci">
          <div class="item">
            <span class="name">退款编号</span>
            <span class="value">
               {{refundInfo.refundNum}}
            </span>
          </div>
          <div class="item">
            <span class="name">订单编号</span>
            <span class="value">
               {{refundInfo.orderNum}}
            </span>
          </div>
          <div class="item">
            <span class="name">协商历史</span>
            <span class="value">
               <router-link :to="{path: '../refundactivitys/'+refundInfo.id}"> 查看</router-link>
            </span>
          </div>
          <div class="item h150">
            <span class="name">当前处理情况</span>
            <span class="value workflow">
                <div class="current-info">{{refundInfo.nextActivityName}}<span style="color:blue">({{refundInfo.nextActivityWaitingTimeStr}})</span></div>
                <div class="wf-list">
                    <div :class="'wf-item '+(item.isCurrent?'active':'')" v-for="(item,index) in refundInfo.activitys" :key="index">
                        <p>{{item.activityName}}</p>
                        <p>{{item.createTime | parseTime}}</p>
                    </div>
                    
                </div>
            </span>
          </div>
          <div class="item hauto">
            <span class="name">退款信息</span>
            <span class="value pline">
                 <p class="courseinfo">
                     <span class="cpic"><img :src="refundInfo.courseImageConvert" style="width:180px;height:80px;" /></span>
                     <span class="cinfo">
                      <span class="cname">{{refundInfo.courseName}}</span>
                      <span class="csdsx">{{(refundInfo.courseSuiDaoSuiXueState?"随到随学":"时间地点固定")}}</span>
                      <span class="ctime">{{(refundInfo.courseSuiDaoSuiXueState?"":refundInfo.courseDateRange+" "+refundInfo.courseTimeRange)}}</span>
                     </span>
                 </p>
                 <p class="oritem">
                     <span>课程购买金额</span>
                     <span>{{(refundInfo.orderMoney/100).toFixed(2)}}</span>
                 </p>
                 <p class="oritem">
                     <span>学习状态</span>
                     <el-tag :type="(refundInfo.studyState?'primary':'info')">{{(refundInfo.studyState?'已学习':'未学习')}}</el-tag>
                 </p>
                 <p class="oritem">
                     <span>退款原因</span>
                     <span>{{refundInfo.reason}}</span>
                 </p>
                 <p class="oritem">
                     <span>申请时间</span>
                     <span>{{refundInfo.createTime | parseTime}}</span>
                 </p>
                 <p class="oritem">
                     <span>退款编号</span>
                     <span>{{refundInfo.refundNum}}</span>
                 </p>
                 <p class="oritem">
                     <span>是否已联系</span>
                     <el-tag :type="(refundInfo.connectState?'success':'info')">{{(refundInfo.connectState ?'已联系':'尚未')}}</el-tag>
                 </p>
            </span>
          </div>
          
           <div class="item">
            <span class="name"></span>
            <span class="value">
                <el-button type="warning" v-if="btnArbitrateState" style="margin-left:10px;" @click="handleArbitrate()">处理仲裁</el-button>
            </span>
          </div>
          <!--- end -->
      </div>
    
      <!-- start 申请仲裁 -->
    <el-dialog title="申请仲裁" :visible.sync="dialogArbitrate.visible"  width="700px">
        <div class="ci">
          <div class="item h100">
            <span class="name required">仲裁结果</span>
            <span class="value">
              <el-input clearable type="textarea" v-model="dialogArbitrate.data.reason" maxlength="500" rows="4" placeholder="" style="width: 420px; "></el-input>
            </span>
          </div>
          <div class="item h100">
            <span class="name">上传图片</span>
            <span class="value pics publicitypic">
                 <bx-image-box :maxlength="3" :images="dialogArbitrate.data.pictrues" 
                  :origin-images="dialogArbitrate.data.pictruesOrigin" :qiniutoken="uploadtoken" 
                  >
                </bx-image-box>
            </span>
          </div>
          
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogArbitrate.visible = false">取 消</el-button>
            <el-button type="primary" @click="userArbitrateRefund()" :loading="dialogArbitrate.saveloading">确 定</el-button>
        </div>
    </el-dialog>
    <!-- end 申请仲裁 -->

  </div>
</template>

<script>

import { objectMerge,deepClone,parseTime,parseSecondsToDay } from '@/utils'
import * as orderApi from '@/api/orders'
import BxImageBox from '@/components/BxImageBox'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'
import * as enumHelper from '@/utils/enum'
import * as uploadApi from '@/api/upload'

const defaultRole = {
  key: '',
  name: '',
  description: '',
  routes: []
}

export default {
  name:'UserRefundDetails',
  components: {
    BxImageBox
  },
  data() {
    return {
      refundInfo:{
        id:guid.empty,
        orderNum:'',
        refundNum:'',
        createTime:'',
        courseImageConvert:'',
        courseName:'',
        studyState:false,
        courseSuiDaoSuiXueState:0,
        courseDateRange:'',
        courseTimeRange:'',
        money:'',
        orderMoney:'',
        state:'',
        reason:'',
        activitys:null,
        currentActivityType:0,
        nextActivityName:'',
        nextActivityWaitingTime:0,
        nextActivityWaitingTimeStr:''
        
      },
      dialogArbitrate:{
        saveloading:false,
        visible:false,
        data:{
          id:'',
          orderNum:'',
          reason:'',
          pictrues:[],
          pictruesOrigin:[]
        },
      },
       
      uploadtoken:''
    }
  },
  computed: {
    btnArbitrateState(){
      return [
        enumHelper.refund.activityType.shoparbitrate,
        enumHelper.refund.activityType.userarbitrate,
        enumHelper.refund.activityType.systemautoarbitrate,
      ].indexOf(this.refundInfo.currentActivityType)>-1;
    },
  },
  filters:{
    parseTradeState(state){
      return enumHelper.order.tradeState.getName(state);
    },
    parsePayType(state){
      return enumHelper.order.payType.getName(state);
    },
    parseOrderType(state){
      return enumHelper.order.orderType.getName(state);
    },
    parseRefundState(state){
      return enumHelper.refund.refundState.getName(state)
    },
  },
  created() {
    this.loadData();
    //加载上传token
    uploadApi.GetUploadToken(1).then(res=>{
        this.uploadtoken=res.data.token;
    });
  },
  methods: {
    loadData(){
        var that=this;
        const id = that.$route.params && that.$route.params.id
        //const orderNum = that.$route.params && that.$route.params.ordernum
        if(id){
          orderApi.getRefundInfo({id:id}).then(res=>{
            if(res.data){
                objectMerge(that.refundInfo,res.data);
              that.refundInfo.studyState=res.data.isStudy==1;
              that.refundInfo.courseImageConvert=imageHelper.GetFullUrl(res.data.courseImage,200,200);
              that.refundInfo.nextActivityWaitingTimeStr=parseSecondsToDay(res.data.nextActivityWaitingTime);

                
            }
          });
        }
    },
    
    handleArbitrate(){
        this.dialogArbitrate.visible=true;
    },
    userArbitrateRefund(){
      var that=this;
      var data={
        id:that.refundInfo.id,
        reason:that.dialogArbitrate.data.reason.trim(),
        images:that.dialogArbitrate.data.pictruesOrigin.join(',')
      }
      if(!data.reason){
        that.$message({
              message: '请填写处理结果',
              type: 'warning'
          });
          return;
      }
      that.dialogArbitrate.saveloading=true;
      orderApi.arbitrateRefund(data).then(res=>{
        if(res.data){
          that.$message({
              message: '处理成功，请通知商家或者用户处理退款',
              type: 'success'
          });
          that.loadData();
          setTimeout(()=>{
            that.dialogArbitrate.saveloading=false;
            that.dialogArbitrate.visible=false;
          },1000)
        }
      }).catch(()=>{
            that.dialogArbitrate.saveloading=false;
      })
    },
  }
}
</script>
<style scoped>
 .workflow{
     display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
 }
 .workflow>.current-info{ align-self: flex-start; }
 .workflow>.wf-list{display:flex; align-self:flex-start; padding:10px;}
 .workflow>.wf-list>div{margin-right: 50px; width:160px; position: relative; border:#ccc dashed 1px; border-radius: 5px;}
 .workflow>.wf-list>div>p{text-align: center;}
 .workflow>.wf-list>div:after{
    position: absolute; top:40px;right:-50px; content: ''; width:50px;height: 1px;
    border-top:#666 solid 2px;
 }
 .workflow>.wf-list>div:last-child::after{
     border-top:#666 solid 0px;
 }
 .item.h150{height: 150px;}
 .workflow>.wf-list>div.wf-item.active{
     border-color:#1890ff;
     color:#1890ff; font-weight: bold;
 }
 .value.pline{flex-wrap: wrap;}
  .value.pline>p{align-self: flex-start; width:100%; }
  .value.pline>p.oritem{display: flex;}
  .value.pline>p.oritem>span:first-child{
     width:120px; color:#666; font-size: 13px; font-weight: bold;
  }
  .value.pline>p.oritem>span:last-child{margin-left: 10px;}
  .value.pline>p.oritem{line-height: 40px; padding: 0; margin:0;}

  
  .courseinfo{display: flex;}
  .courseinfo>span.cpic{ width:190px;}
  .courseinfo>span.cinfo{display: flex; flex-direction: column; justify-items: flex-start;}
  .courseinfo>span.cinfo>span{ line-height: 30px;}
  .courseinfo>span.cinfo>span.cname{font-size: 14px;font-weight: bold;}
  .courseinfo>span.cinfo>span.csdsx{font-size: 13px;color:#666;line-height: 26px;}
  .courseinfo>span.cinfo>span.ctime{font-size: 13px;color:#666;line-height: 26px;}
</style>

